<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷你音乐播放器测试</title>
    <link rel="stylesheet" href="./static/index.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css">
</head>
<body>
    <div class="container">
        <div class="player">
            <div class="player-track">
                <div class="album-name">记得我爱你</div>
                <div class="track-name">周星星</div>
                <div class="track-time">
                    <div class="current-time">00.00</div>
                    <div class="total-time">03.50</div>
                </div>
                <div class="progress-box">
                    <div class="hover-time">00.36</div>
                    <div class="hover-bar"></div>
                    <div class="progress-bar"></div>
                </div>
                <div class="player-content">
                    <div class="album-cover">
                        <img src="./img/16.jpg" alt="" class="active">
                        <img src="./img//18.jpg" alt="">
                        <img src="./img/2.jpg" alt="">
                        <img src="./img/30.jpg" alt="">
                    </div>
                    <div class="play-controls">
                        <div class="control">
                            <div class="button play-prev">
                                <i class="fa fa-step-backward"><svg t="1663740953984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2961" width="48" height="48"><path d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D" p-id="2962"></path><path d="M415.8 679.9c5.9 0 11.5-1.6 16.2-4.5l231.1-134.6c10.9-5.2 18.5-16.3 18.5-29.2 0-11.9-6.4-22.3-16-27.8L439.7 352.2c-5.8-6.7-14.4-10.9-23.9-10.9-17.6 0-31.8 14.4-31.8 32.1 0 0.6 0 1.2 0.1 1.8l-0.4 0.2 0.5 269c-0.1 1.1-0.2 2.2-0.2 3.4 0 17.7 14.3 32.1 31.8 32.1z" fill="#4D4D4D" p-id="2963"></path><path d="M909.8 306.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S128.8 723.8 128.8 512.2 300.4 129.1 512 129.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C653.6 81.9 584.9 64.5 512 64.5 264.7 64.5 64.3 265 64.3 512.2S264.7 959.9 512 959.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z" fill="#4D4D4D" p-id="2964"></path></svg></i>
                            </div>
                        </div>
                        <div class="control">
                            <div class="button play-pause">
                                <i class="fa fa-play"><svg t="1663741117543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5798" width="48" height="48"><path d="M121.3 680.4m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#242424" p-id="5799"></path><path d="M266.5 855.6m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#242424" p-id="5800"></path><path d="M512 35.6C252.8 35.6 42.6 245.7 42.6 505c0 69 14.9 134.6 41.7 193.6l74.2-35.4c-21.7-48.3-33.7-101.8-33.7-158.2 0-213.8 173.3-387.2 387.2-387.2S899.2 291.1 899.2 505 725.8 892.1 512 892.1c-81.9 0-157.9-25.4-220.4-68.8l-51.2 57.2c1.5 0.7 2.5 2.1 2.5 3.6s0.3 3.2-1.2 3.9c76.7 54.5 169.2 86.2 270.4 86.2 259.2 0 469.4-210.1 469.4-469.4S771.2 35.6 512 35.6z" fill="#242424" p-id="5801"></path><path d="M419.9 329.1c22.6 0 41 18.3 41 41v261.7c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V370.1c0-22.6 18.4-41 41-41zM610.9 329.1c22.6 0 41 18.3 41 41v261.7c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V370.1c0-22.6 18.4-41 41-41z" fill="#242424" p-id="5802"></path></svg></i>
                            </div>
                        </div>
                        <div class="control">
                            <div class="button play-next">
                                <i class="fa fa-step-backward"><svg t="1663741088258" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4336" width="48" height="48"><path d="M699.8 788.7c-55.5 37.6-120.4 57.4-187.7 57.4-184.8 0-335.2-150.4-335.2-335.2 0-66.4 19.4-130.6 56-185.6 7.5-11.2 4.4-26.4-6.8-33.9s-26.4-4.4-33.9 6.8c-42 63.1-64.2 136.6-64.2 212.7 0 211.8 172.3 384 384.1 384 77.1 0 151.5-22.8 215.1-65.9 11.2-7.6 14.1-22.8 6.5-33.9-7.6-11.1-22.8-14-33.9-6.4zM512.1 126.9c-82 0-160.3 25.5-226.3 73.7-10.9 8-13.3 23.2-5.3 34.1 8 10.9 23.2 13.3 34.1 5.3 57.6-42.1 125.9-64.3 197.5-64.3 184.8 0 335.2 150.4 335.2 335.2 0 71.6-22.2 139.8-64.3 197.4-8 10.9-5.6 26.2 5.3 34.1 4.3 3.2 9.4 4.7 14.4 4.7 7.5 0 15-3.5 19.7-10 48.2-66 73.7-144.3 73.7-226.2 0-211.7-172.3-384-384-384z" fill="#333333" p-id="4337"></path><path d="M619.4 642.2c13.5 0 24.4-10.9 24.4-24.4V398.1c0-13.5-10.9-24.4-24.4-24.4-13.5 0-24.4 10.9-24.4 24.4v81.7L416.9 376.9c-7.6-4.4-16.9-4.4-24.4 0-7.6 4.4-12.2 12.4-12.2 21.2v219.7c0 8.7 4.7 16.8 12.2 21.2 3.8 2.2 8 3.3 12.2 3.3 4.2 0 8.4-1.1 12.2-3.3L595 536.2v81.7c0 13.4 10.9 24.3 24.4 24.3z m-190.3-66.7V440.4l117 67.6-117 67.5z" fill="#333333" p-id="4338"></path></svg></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/index.js"></script>
</body>
</html>